<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.css">
</head>
<body>
  <div id="app">

    <comment-app></comment-app>
  </div>
  <script src="./vue.js"></script>
  <script>
    /* 
      组件模板必须要根节点

      组件通信应运而生
    */
   const bus = new Vue()
    const commentApp = {
      template: `
        <div class="container">
          <commentInput @send:comment='getComment'></commentInput>
          <commentList :comments='comments'></commentList>
        </div>
      `,
      data (){
       return {
         comments : [],
         
       } 
      },
    methods:{
      getComment (comment){
        this.comments.push(comment)
      }
    },
    created (){
      bus.$on('del:index',(index) => {
        this.comments.splice(index,1)
      })
    }
    }
    const commentInput = {
      template: `
        <div class="commentInput">
          <div class="form-group">
            <input type="text" class="form-control" v-model='comment.username'>
          </div>
          <div class="form-group">
            <textarea class="form-control" v-model='comment.comment'></textarea>
          </div>
          <div class="form-group clearfix">
            <button class="btn btn-success pull-right" @click='sendComment'>发布</button>
          </div>
        </div>
      `,
      data (){
       return {
         
          comment:{
          username:'',
          comment:'',
           msg:'',
          alert_class:'danger',
          t:null,
       }
        }
      },
      methods:{
          sendComment (){
            const 
            d = new Date(),
            y = d.getFullYear(),
            m = d.getMonth() + 1,
            day = d.getDate(),
            h = d.getHours()<10 ? '0' + d.getHours() : d.getHours(),
            min = d.getMinutes() ? '0' + d.getMinutes() : d.getMinutes() ,
            s = d.getSeconds()<10 ? '0' + d.getSeconds() : d.getSeconds()
     
        var timer= y+'/'+m+'/'+day+'/ '+h+':'+min+':'+s
        
        this.comment.postDate = timer
            this.$emit('send:comment',Object.assign({},this.comment))
            this.comment.comment=''
            this.comment.msg='评论成功'
          }
      }
    }
    const noCode={
      template:`
      <div class="list-group" v-else>
          <a href="#" class="list-group-item disabled">
            暂无评论
          </a>
        </div>
      `
    }
    const msg = {
      template:`
      <div v-if="msg" :class="['alert', {'alert-danger': alert_class === 'danger'}, {'alert-success': alert_class === 'success'}]" ></div>
      `
    }
    const commentList = {
      template: ` 
        <div class="list-group" v-if='comments.length'>
          <commentItem v-for='(comment,index) in comments' :key='index' :index='index' :comment='comment'></commentItem>
          
          </div>
       
        <noCode v-else></noCode> 
     
      `,
      props:['comments'],
    }
    const commentItem = {
      template: `  
       
        <a href="javascript:;" class="list-group-item" >
          <button type="button" class="close" @click='delIndex(index)'><span>&times;</span></button>
          <h4 class="list-group-item-heading">{{comment.username}}</h4>
          <p class="list-group-item-text">{{comment.comment}}</p>
          <p class="text-muted text-right">{{comment.postDate}}</p>
        </a>
      `,
      props:['comment','index'],
      methods:{
        delIndex (index){
           bus.$emit('del:index',index)
        } 
      }
    }
    
    Vue.component('commentApp', commentApp)
    Vue.component('commentInput', commentInput)
    Vue.component('commentList', commentList)
    Vue.component('commentItem', commentItem)
    Vue.component('noCode',noCode)
    Vue.component('msg',msg)
    const app = new Vue({
      el: "#app",
      
    })


  </script>
</body>
</html>